<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="user-scalable=no, width=device-width,initial-scale=1.0,maximum-scale=1.0">
    <title>登录</title>
    <link rel="icon" href="./img/icon.png" type="img/x-icon">
    <link rel="stylesheet" type="text/css" href="css/login.css">
    <script src="./js/index.js"></script>
</head>
<body>
    <span style="position: absolute;left: 45%">
            <div class="wrap">
                <div class="cube">
                    <span class="in_front">
                        <img src = "img/1.gif" class="in_pic" />
                    </span>
                    <span class="in_back">
                         <img src = "img/1.gif" class="in_pic" />
                    </span>
                    <span class="in_left">
                        <img src = "img/1.gif" class="in_pic" />
                    </span>
                    <span class="in_right">
                        <img src = "img/1.gif" class="in_pic" />
                    </span>
                    <span class="in_top">
                        <img src = "img/1.gif" class="in_pic" />
                    </span>
                    <span class="in_bottom">
                        <img src = "img/1.gif" class="in_pic" />
                    </span>
                </div>
            </div>
        </span>

    <div class="mian loginwill"style="display: block;">
        <div id="r">
            <div class="temp"></div>
        </div>
        <article class="main2">
            <div class="nav"></div>
            <div class="anav" >
                <form>
                    <div class="username">
                        <svg t="1668152763462" class="icon ic1" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="2654" width="64" height="64"><path d="M508.8 141.21c119.85 0 217.36 97.51 217.36 217.36S628.65 575.93 508.8 575.93s-217.36-97.51-217.36-217.36 97.51-217.36 217.36-217.36m0-76.71c-162.41 0-294.07 131.66-294.07 294.07S346.39 652.64 508.8 652.64s294.07-131.66 294.07-294.07S671.21 64.5 508.8 64.5z" p-id="2655" fill="#515151"></path><path d="M106.1 959.5c-2.21 0-4.46-0.19-6.71-0.59-20.86-3.68-34.79-23.58-31.11-44.44 38.81-219.89 255.93-338.54 440.52-338.54 21.18 0 38.36 17.17 38.36 38.36s-17.17 38.36-38.36 38.36c-122.34 0-329.6 74.7-364.97 275.17-3.28 18.59-19.47 31.68-37.73 31.68z" p-id="2656" fill="#515151"></path><path d="M917.9 959.5c-18.27 0-34.45-13.09-37.73-31.7-35.38-200.46-242.64-275.16-364.97-275.16-21.18 0-38.36-17.17-38.36-38.36s17.17-38.36 38.36-38.36c184.59 0 401.72 118.65 440.52 338.54 3.68 20.86-10.25 40.76-31.11 44.44-2.25 0.41-4.5 0.6-6.71 0.6z" p-id="2657" fill="#515151"></path></svg>
                        <input  type="text" class="user" placeholder="请输入11位手机号">
                    </div>
                    <div class="password">
                        <svg t="1668152797948" class="icon ic2" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="5052" width="64" height="64"><path d="M512 128a170.666667 170.666667 0 0 0-170.666667 170.666667v128h341.333334V298.666667a170.666667 170.666667 0 0 0-162.133334-170.453334L512 128z m298.666667 384H213.333333a42.666667 42.666667 0 0 0-42.666666 42.666667v298.666666a42.666667 42.666667 0 0 0 42.666666 42.666667h597.333334a42.666667 42.666667 0 0 0 42.666666-42.666667v-298.666666a42.666667 42.666667 0 0 0-42.666666-42.666667zM512 42.666667a256 256 0 0 1 256 256v128h42.666667a128 128 0 0 1 128 128v298.666666a128 128 0 0 1-128 128H213.333333a128 128 0 0 1-128-128v-298.666666a128 128 0 0 1 128-128h42.666667V298.666667a256 256 0 0 1 246.4-255.829334L512 42.666667z" p-id="5053" fill="#515151"></path></svg>
                        <input type="text" class="psw" placeholder="请输入验证码" >
                        <button class="btn" onclick="scode()" type="button">发送验证码</button>
                    </div>
                    <div class="ckb">
                        <input class="checkb" type="checkbox"><span class="cspan">下次自动登录</span>
                    </div>

                    <div class="lb">
                        <a id="login" class="ltn" >登录</a>
                    </div>
                    <div class="regist" >
                        <div class="con"></div>
                        <span class="rgs" style="font-weight: bolder;">没有账号？</span>
                        <div class="registed" style="font-weight: bolder;">立即注册</div>
                    </div>
                </form>
            </div>
            <div class="enav"></div>
        </article>
    </div>
    <div class="mian registwill" style="display: none;">
        <div id="l">
            <div class="ltemp"></div>
        </div>
        <article class="main2">
            <div class="lnav"></div>
            <div class="lanav">
                <span>
                    <div class="main2 u">
                        <div class="uh">
                            <label for="ut" class="us"style="font-weight: bolder;">用户名</label>
                        </div>
                        <div class="uf main2">
                            <div class="t"></div>
                            <input id="ut" type="text" placeholder="用户名长度至少6位">
                        </div>
                    </div>
                    <div class="main2 e">
                        <div class="uh">
                            <label for="et" class="us" style="font-weight: bolder;">电子邮箱</label>
                        </div>
                        <div class="uf main2">
                            <div class="tt"></div>
                            <input id="et" type="text" placeholder="请输入电子邮箱">
                        </div>
                    </div>
                    <div class="main2 e">
                        <div class="uh">
                            <label for="pt" class="us" style="font-weight: bolder;">手机号</label>
                        </div>
                        <div class="uf main2">
                            <span class="phcity">+86</span>
                            <input id="pt" type="text" placeholder="请输入11位手机号码">
                        </div>
                    </div>
                    <div class="main2 e">
                        <div class="uh">
                            <label for="codet" class="us" style="font-weight: bolder;">手机验证码</label>
                        </div>
                        <div class="uf main2">
                            <input id="codet" type="text" placeholder="请输入的验证码">
                            <div class="code">
                                <button class="sendcode" onclick="scode2()" type="button">发送验证码</button>
                            </div>
                        </div>
                    </div>

                    <div class="main2 u">
                        <div class="uh"></div>
                        <div class="uf main2" style="margin-right: 0">
                            <button class="loginbtn"><span style="font-size: 25px">注册</span></button>
                            &nbsp;&nbsp;
                            <span class="loginspan" style="font-size: 21px;font-weight: bolder; margin-top: 5px">已有帐号？</span>
                            <div class="reg" style="margin-top: 5px">立即登录</div>
                        </div>
                    </div>

                </span>
            </div>

            <div class="lenav"></div>
        </article>
    </div>

    <div class="footer">
        <span style="font-size: 25px;">Made with</span>
        <span style="color: rgb(255, 255, 255);">❤️</span>
        by ZhangYangSong
    </div>

</body>
</html>
<script>
    var psw;
    var codet;
    var loginbtn;
    var login;
    var t=0;
    var tt =0;
    var code=0;
    var code2=0;
    var sendcode;
    window.onload = function (){
        var loginwill = document.getElementsByClassName("loginwill")[0];
        var reginwill = document.getElementsByClassName("registwill")[0];
        var registed = document.getElementsByClassName("registed")[0];
        var reg = document.getElementsByClassName("reg")[0];
        var lb =document.getElementsByClassName("lb")[0];
        loginbtn = document.getElementsByClassName("loginbtn")[0];
        login = document.getElementById("login")
        var user = document.getElementsByClassName("user")[0];
        psw = document.getElementsByClassName("psw")[0];
        var ut = document.getElementById("ut");
        var et = document.getElementById("et");
        let pt = document.getElementById("pt");
        codet = document.getElementById("codet");
        sendcode = document.getElementsByClassName("sendcode")[0];


        registed.onclick = function () {
            reginwill.style.display = "block";
            loginwill.style.display = "none";
        };
        reg.onclick = function () {
            reginwill.style.display = "none";
            loginwill.style.display = "block";
        };
        login.onclick = function () {
            if (user.value == "") {
                window.alert("请输入手机号")
                t=1
            } else if (/^1[3456789]\d{9}$/.test(user.value) == false) {
                window.alert("手机号格式错误");
                t=1
            } else if (psw.value == "") {
                window.alert("请输入验证码");
            } else if (psw.value != code) {
                window.alert("验证码无效")
            } else {
                if (!localStorage.hasOwnProperty(user.value)){
                    alert("此手机号未注册")
                } else{
                    window.alert("登录成功");
                    login.href = "index.html";
                }
                code = 0;

            }
        };
        user.onclick = function() {
            setInterval(function(){
                if (user.value == "") {
                    document.getElementsByClassName("username")[0].style.border = "red solid 1px";
                } else if (/^1[3456789]\d{9}$/.test(user.value) == false) {
                    document.getElementsByClassName("username")[0].style.border = "red solid 1px"
                } else {
                    document.getElementsByClassName("username")[0].style.border = "blue solid 1px"
                }
            },0)
        }
        psw.onclick = function() {
            setInterval(function(){
                if (psw.value == "") {
                    document.getElementsByClassName("password")[0].style.border = "red solid 1px";
                } else if (psw.value != code) {
                    document.getElementsByClassName("password")[0].style.border = "red solid 1px";
                } else {
                    document.getElementsByClassName("password")[0].style.border = "blue solid 1px";
                }
            },0)
        }

        ut.onclick = function() {
            setInterval(function(){
                if (ut.value == "") {
                    document.getElementsByClassName("uf")[0].style.border = "red solid 1px";
                } else if (/^[a-zA-Z0-9]{6,16}$/.test(ut.value) == false){
                    document.getElementsByClassName("uf")[0].style.border = "red solid 1px";
                } else if (/^[a-zA-Z0-9]{6,16}$/.test(ut.value) == true) {
                    document.getElementsByClassName("uf")[0].style.border = "blue solid 1px";
                } 
            },0);
        }

        et.onclick = function() {
            setInterval(function(){
                if (et.value == ""){
                document.getElementsByClassName("uf")[1].style.border = "red solid 1px";
                } else if (/^\w+([-+.]\w+)*@\w+([-.]\w+)*\.\w+([-.]\w+)*$/.test(et.value) == false){
                    document.getElementsByClassName("uf")[1].style.border = "red solid 1px";
                } else if (/^\w+([-+.]\w+)*@\w+([-.]\w+)*\.\w+([-.]\w+)*$/.test(et.value) == true){
                    document.getElementsByClassName("uf")[1].style.border = "blue solid 1px";
                }
            },0)
        }



        pt.onclick = function() {
            setInterval(function() {
                if (pt.value == ""){
                    document.getElementsByClassName("uf")[2].style.border = "red solid 1px";
                }else if (/^1[3456789]\d{9}$/.test(pt.value) == false){
                    document.getElementsByClassName("uf")[2].style.border = "red solid 1px";
                }else if (/^1[3456789]\d{9}$/.test(pt.value) == true){
                    document.getElementsByClassName("uf")[2].style.border = "blue solid 1px";
                }
            },0)
        }
        codet.onclick = function() {
            setInterval(function(){
                if (codet.value == ""){
                    document.getElementsByClassName("uf")[3].style.border = "red solid 1px";
                } else if (codet.value != code2) {
                    document.getElementsByClassName("uf")[3].style.border = "red solid 1px";
                }else if (codet.value == code2) {
                    document.getElementsByClassName("uf")[3].style.border = "blue solid 1px";
                }
            },0)
        }


        loginbtn.onclick = function () {
            if (ut.value == "") {
                window.alert("用户名不能为空")
                tt = 1
            } else if (/^[a-zA-Z0-9]{6,16}$/.test(ut.value) == false){
                window.alert("用户名格式错误")
                tt = 1
            } else if (et.value == ""){
                window.alert("电子邮箱不能为空")
                tt = 1
            } else if (/^\w+([-+.]\w+)*@\w+([-.]\w+)*\.\w+([-.]\w+)*$/.test(et.value) == false){
                window.alert("电子邮箱格式错误")
                tt = 1
            } else if (pt.value == ""){
                window.alert("手机号不能为空")
                tt = 1
            }else if (/^1[3456789]\d{9}$/.test(pt.value) == false){
                window.alert("手机号格式错误")
                tt = 1
            }else if (codet.value == ""){
                window.alert("手机号验证码不能为空")
            } else if (codet.value != code2) {
                window.alert("验证码无效")
            } else{
                if (localStorage.hasOwnProperty(pt.value)) {
                    alert("此手机号已注册")
                } else{
                    localStorage[pt.value] = et.value;
                    console.log("当前有效用户数量为" + localStorage.length)
                    window.alert("注册成功")
                    reginwill.style.display = "none";
                    loginwill.style.display = "block";
                    code2 = 0;
                }
                
            }
        };
    };

    function scode(){
        if (psw.value != ""){
            psw.value = "";
        }
        login.onclick()
        if (t == 0)
            code = Math.round(Math.random() * (999999 - 100000) + 100000);
            setInterval(function () {
                code = Math.round(Math.random() * (999999 - 100000) + 100000);
            },1000 * 60 * 5)
            console.log("【验证密码】您的登录验证码为" + code + "。尊敬的客户，以上验证码5分钟内有效，狗狗不会以任何方式向您索取验证码，请勿泄露或转发他人。【狗狗音乐】");
        t = 0
    }
    function scode2(){
        if (codet.value != ""){
            codet.value = "";
        }
        loginbtn.onclick();
        if (tt == 0)
            code2 = Math.round(Math.random() * (999999 - 100000) + 100000);
            setInterval(function () {
                code2 = Math.round(Math.random() * (999999 - 100000) + 100000);
            }, 1000 * 60 * 5);
            console.log("【验证密码】您的注册验证码为" + code2 + "。尊敬的客户，以上验证码5分钟内有效，狗狗不会以任何方式向您索取验证码，请勿泄露或转发他人。【狗狗音乐】")
        tt = 0;
    }

    var body = document.querySelector("body");
    var anquan = document.getElementsByClassName("uf")[3];
    var pt = document.getElementById("pt");
    anquan.onmouseover = function() {
        if (pt.value == "" || /^1[3456789]\d{9}$/.test(pt.value) == false) {
            codet.setAttribute("readonly","readonly");
            sendcode.style.background = "white";
            sendcode.style.color = "gray";
            sendcode.disabled = true;
            anquan.style.cursor = "not-allowed";
        } else {
            codet.removeAttribute("readonly")
            sendcode.disabled = false;
            sendcode.style.background = "blue";
            sendcode.style.color = "white";
            anquan.style.cursor = "move";
        }
    }
    setInterval(anquan.onclick, 0);

</script>